<template>
  <div style="padding: 0.1rem 0.2rem">
    <div class="my-title">
      <div>云染数据</div>
      <div style="font-size: 0.16rem">{{currentUser.userId}}【{{currentUser.userName}}】</div>
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item><img src="/1.jpg" style="height:2rem;width:100%;border-radius:0.1rem;" /></van-swipe-item>
      <van-swipe-item><img src="/2.jpg" style="height:2rem;width:100%;border-radius:0.1rem;" /></van-swipe-item>
      <van-swipe-item><img src="/3.jpg" style="height:2rem;width:100%;border-radius:0.1rem;" /></van-swipe-item>
    </van-swipe>
    
    <van-grid v-if="active==='work'" icon-size="0.3rem" :column-num="3"  :border="false">
      <van-grid-item v-for="menu in menuList" :key="menu.menuId"  :to="menu.menuUrl">
        <template #icon v-if="icons[menu.menuUrl]" >
          <i
            class="fa fa-plane" :class="icons[menu.menuUrl].icon"
            style="color: orange; line-height: 0.3rem; font-size: 0.26rem" :style="{color:icons[menu.menuUrl].color}"
          ></i>
        </template>
        <template #text>
          <span style="color: #00aaff; line-height: 0.3rem;font-size: 0.14rem; font-weight: bold" >{{menu.menuName}}</span
          >
        </template>
      </van-grid-item>
      <!-- 
      <van-grid-item icon="friends" icon-color="#00AAFF" url="/emp">
        <template #text>
          <span style="color: #00aaff; font-size: 0.14rem; font-weight: bold"
            >员工管理</span
          >
        </template>
      </van-grid-item>

      <van-grid-item icon="wap-home" icon-color="#99DDAA">
        <template #text>
          <span style="color: #00aaff; font-size: 0.14rem; font-weight: bold"
            >部门管理</span
          >
        </template>
      </van-grid-item>

      <van-grid-item style="font-size: 0.3rem">
        <template #icon>
          <i
            class="fa fa-plane"
            style="color: orange; line-height: 0.3rem; font-size: 0.3rem"
          ></i>
        </template>
        <template #text>
          <span style="color: #00aaff; font-size: 0.14rem; font-weight: bold"
            >申请出差</span
          >
        </template>
      </van-grid-item>

      <van-grid-item style="font-size: 0.3rem">
        <template #icon>
          <i
            class="fa fa-coffee"
            style="color: #aa8866; line-height: 0.3rem; font-size: 0.3rem"
          ></i>
        </template>
        <template #text>
          <span style="color: #00aaff; font-size: 0.14rem; font-weight: bold"
            >请休假</span
          >
        </template>
      </van-grid-item>

      <van-grid-item style="font-size: 0.3rem">
        <template #icon>
          <i
            class="fa fa-sign-out"
            style="color: orange; line-height: 0.3rem; font-size: 0.3rem"
          ></i>
        </template>
        <template #text>
          <span style="color: #00aaff; font-size: 0.14rem; font-weight: bold"
            >离职</span
          >
        </template>
      </van-grid-item>

      <van-grid-item style="font-size: 0.3rem">
        <template #icon>
          <i
            class="fa fa-pencil-square"
            style="color: #00aaff; line-height: 0.3rem; font-size: 0.3rem"
          ></i>
        </template>
        <template #text>
          <span style="color: #00aaff; font-size: 0.14rem; font-weight: bold"
            >日志</span
          >
        </template>
      </van-grid-item> 
      -->
    </van-grid>
  
    
    <van-cell-group v-if="active === 'me'">
      
      <van-cell is-link to="/security/password" >
        <template #title>
          <i class="fa fa-key fa-lg" style="color:orange"></i>
          <span style="font-size:0.18rem;;padding:0.1rem;font-weight:bold;">密码修改</span>
        </template>
      </van-cell>

    
      <van-cell is-link @click="logout" >
        <template #title>
          <i class="fa fa-sign-out fa-lg" style="color:#999999;"></i>
          <span style="font-size:0.18rem;padding:0.1rem;font-weight:bold;">退出</span>
        </template>
      </van-cell>
      
    </van-cell-group>
    

  </div>
  <van-tabbar v-model="active">
    <van-tabbar-item name="work" icon="records" style="font-weight:bold;font-size:0.16rem;">工作</van-tabbar-item>
    <van-tabbar-item name="me" icon="user-o" style="font-weight:bold;font-size:0.16rem;">我</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { tip, get, post, del, removeLocalToken } from "@/common";

//fa-balance-scale
const icons = {
  "/process/pretreatment":{
    icon:'fa-balance-scale',
    color:'#AAAAAA'
  },
  "/process/dye":{
    icon:'fa-flask',
    color:'orange'
  },
  "/process/print":{
    icon:'fa-pinterest',
    color:'#FF66AA'
  },
  "/process/arrange":{
    icon:'fa-bars',
    color:'#33cc99'
  },
  "/process/store":{
    icon:'fa-university',
    color:'#999999'
  },
  "/process/out":{
    icon:'fa-sign-out',
    color:'saddlebrown'
  }
};

const router = useRouter();

const active = ref("work");
const show = ref(false);

const currentUser = ref({});
const getCurrentUser = async ()=>{
  const result = await get('/security/home/curr-user');
  currentUser.value = result.data;
}
getCurrentUser();

const menuList = ref([]);
const getMenuList = async ()=>{
  const result = await get('/security/home/menu-list-m');
  menuList.value = result.data;
};
getMenuList();


//退出
const logout = async ()=>{
  await del('/security/home/logout');
  removeLocalToken();
  tip.success("成功退出云染数据！");
  router.replace({path:'/login'});
};



</script>

<style scoped>
.my-title {
  font-size: 0.26rem;
  color: #666666;
  font-weight: bold;
  padding-bottom: 0.2rem;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  
}


</style>